<template>
	<view>
		<view class="box1" hover-class="hov">
			
		</view>
		<icon type="download" color="#ff4400" size="50"></icon>
		
	
		<text selectable="ture" space="ensp">还有90天过年</text>
		
		<scroll-view class="wrap" scroll-y="true">
			<view class="inner"></view>
			<view class="inner"></view>
			<view class="inner"></view>
			<view class="inner"></view>
			<view class="inner"></view>
			<view class="inner"></view>
			<view class="inner"></view>
			<view class="inner"></view>
			<view class="inner"></view>
			<view class="inner"></view>
		</scroll-view>
		<scroll-view class="wrap2" scroll-x="true">
			<view class="inner"></view>
			<view class="inner"></view>
			<view class="inner"></view>
			<view class="inner"></view>
			<view class="inner"></view>
			<view class="inner"></view>
			<view class="inner"></view>
			<view class="inner"></view>
			<view class="inner"></view>
			<view class="inner"></view>
		</scroll-view>
		
		<swiper autoplay="true" interval="1000" circular="true" indicator-dots="true">
			<swiper-item>A</swiper-item>
			<swiper-item>B</swiper-item>
			<swiper-item>C</swiper-item>
		</swiper>
		
        <image src="../../static/1.png" mode=""></image>
		<image src="../../static/1.png" mode="aspectFit"></image>
		<image src="../../static/1.png" mode="aspectFill"></image>
		<image src="../../static/1.png" mode="widthFix"></image>
		<image src="../../static/1.png" mode="heightFix"></image>
		
		<button>默认按钮</button>
		<button type="primary">主要按钮</button>
		<button type="warn">警告按钮</button>
		<button type="warn" plain="true">警告按钮</button>
		<button type="warn" size="mini">警告按钮</button>
		
		<text>性别：</text>
		<radio-group>
			<label><radio value="1">男</radio></label>
			<label><radio value="0"> 女</radio></label>
		</radio-group>
		
		<view class="">
			<text>你喜欢吃什么水果:></text>
			<checkbox-group name="">
				<label>
					<checkbox :value="apple"><text>苹果</text></checkbox>
				</label>
				<label>
				   <checkbox :value="banana"><text>香蕉</text></checkbox>
				</label>
				<label>
					<checkbox :value="watermelon"><text>西瓜</text></checkbox>
				</label>
			</checkbox-group>
		</view>
		
		<view class="">
			<input type="password" placeholder="请输入密码" />
		</view>
		
		<view class="">
			<slider min="0" max="150" show-value="true" />
		</view>
		
		<view class="">
			<switch checked="true" @change=""></switch>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	input{
		border: 1px solid #ededed;
		margin: 10rpx;
		border-radius: 10rpx;
		height: 100rpx;
	}
.box1{
	width: 100px;
	height: 100px;
	background-color: blue;
}
.hov{
	width: 200px;
	height: 200px;
	background-color: red;
}

.wrap{
	width: 200px;
	height: 300px;
	border: 1px solid black;
}
.inner{
	width: 50px;
	height: 50px;
	background-color: red;
	margin: 10px 10px;
	display: inline-block;
}
.wrap2{
	width: 300px;
	height: 150px;
	border: 1px solid black;
	white-space: nowrap;
}
swiper{
	width: 100%;
	height: 200px;
}
swiper-item{
	width: 100%;
	height: 200px;
	font-size: 40px;
	text-align: center;
	line-height: 200px;
}
swiper-item:nth-child(1){
	background-color: aqua;
}
swiper-item:nth-child(2){
	background-color: #ff4400;
}
swiper-item:nth-child(3){
	background-color: chartreuse;
}
</style>
